// 获取dom元素 渲染学生列表
const table = document.querySelector('.list')
const total = document.querySelector('.total')

// 发起请求获取数据 渲染学生列表
const getStudentList = async () => { 
  const res = await axios({
    url: '/students',
    method:'get',
  })
  console.log(res)
  const htmlStr=res.data.map(item => { 
    return `<tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender?'男':'女'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province+item.city+item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3" 
        ><i class="bi bi-pen" data-id='${item.id}'></i
      ></a>
      <a href="javascript:;" class="text-danger" ><i class="bi bi-trash" data-id='${item.id}'></i></a>
    </td>
  </tr>`
  }).join('')
  // str=res.data.length
  table.innerHTML = htmlStr
  total.innerHTML=res.data.length
}
getStudentList()
// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector("#modal");
const modal = new bootstrap.Modal(modalBox);
const ps = document.querySelector("[name=province]");
const cs = document.querySelector("[name=city]");
const as = document.querySelector("[name=area]");
const form=document.querySelector('#form')
const submitBtn=document.querySelector('#submit')

// 渲染级联表格
const initCity = async () => {
  const {list}= await axios({
    url: '/api/province',
  })
  console.log(list);
  // 渲染省份数据 给option添加value值来给cs的pname
  const provinceStr = list.map(item => {
    return ` <option value="${item}">--${item}--</option>`
  }).join('')
  // 修改ps的innerhtml
  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`
  // 给ps添加change事件，触发请求城市的数据请求
  ps.addEventListener('change', async function () {
    cs.innerHTML = `<option value="">--城市--</option>`
    as.innerHTML = `<option value="">--地区--</option>`
    if (!ps.value) return
    // 发起请求获取城市的数据
    const { list } = await axios({
      url: '/api/city',
      method: 'get',
      params: { pname: ps.value }
    })
    console.log(list);
    // 根据获取的城市数据来遍历生成字符串渲染cs
    const cityStr = list.map(item => {
      return ` <option value="${item}">--${item}--</option>`
    }).join('')
    // 修改cs的innerhtml
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
    // 给cs添加change事件，当改变时发起请求获取地区的数据
    cs.addEventListener('change', async function () {
      // 在cs改变时，就将地区的as设置为默认值
      as.innerHTML = `<option value="">--地区--</option>`
      // 如果cs的值为空，则直接返回不发请求（当默认时value里面没有值）
      if (!cs.value) return
      const { list } = await axios({
        url: '/api/area',
        method: 'get',
        // 这个值是要发起请求时就要带着的
        params: { pname: ps.value, cname: cs.value }
      })
      console.log(list);
      // 遍历获取回来的数据，进行数据处理成字符串，然后渲染as的下拉框
      const areaStr = list?.map(item => {
        return ` <option value="${item}">--${item}--</option>`
      }).join('')
      as.innerHTML = `<option value="">--城市--</option>${areaStr}`
    })
  })
}
initCity()
// 弹出模态框
document.querySelector('#openModal').addEventListener('click', function () { 
  // 点击添加，打开modal前
  form.reset()
  modalBox.dataset.id = 'add'
  
  modalBox.querySelector('.modal-title').innerHTML ='添加学生'
  modal.show()
})

// 给提交按钮绑定点击事件
submitBtn.addEventListener('click', async function () { 
  // 获取表单数据
  const data = serialize(form, { hash: true })
  // console.log(data);

  // 转换数据类型
  data.age = +data.age
  data.gender=+data.gender
  data.hope_salary=+data.hope_salary
  data.salary=+data.salary
  data.group=+data.group
  // console.log(data);
  // 判断组号
  if(data.group<1||data.group>8)return alert('组号只能选择1-8')
  // // 限制必填选项不为空
  // for (let key in data) { 
  //   if(!data[key]===null) return alert('内容不能为空')
  // }
  // 限制年龄输入正确的
  if (data.age < 0) return alert('请输入正确的年龄')
  if (modalBox.dataset.id === 'add') {
    try {
      const res = await axios({
        url: '/students',
        method: 'post',
        data,
      })
      // console.log(res);
      // 关闭modal框
      modal.hide()
      // 渲染学生表格
      getStudentList()
      // 提示用户添加成功
      alert(res.message)
    } catch (error) {
      console.log(error);
    }
  } else { 
   const res= await axios({
      url: '/students/' + modalBox.dataset.id,
      method: 'PUT',
      data,
    })
    modal.hide()
    getStudentList()
    alert(res.message)
  }
})
// 事件委托  修改学生信息
table.addEventListener('click', async function (e) {
  console.log(e);
  
  if (e.target.classList.contains('bi-pen')) {
    console.log('我是编辑功能');
    // 获取学生的id
    const id = e.target.dataset.id
    // 发起获取学生详情的请求
    const res = await axios({
      url: '/students/' + id,
    })
    // 测试渲染效果
    console.log(res);

    // 获取所有的name属性的表单
    const nodelist = modalBox.querySelectorAll('[name')
    console.log(nodelist)
    nodelist.forEach(item => { 
      // 选择gender这个属性选择框，根据res.data里面的gender的值来判断获取哪个gender input框
      if (item.name === 'gender') { 
        // 如果是1则是男，如果是0则是女
        res.data.gender ? modalBox.querySelector('#cb01').checked = true : modalBox.querySelector('#cb02').checked=true
      }
      // 通过遍历nodelist来实现给每个表单input框赋值
      item.value = res.data[item.name]
    })

    // 发起请求获取城市的数据
    const { list:cityData } = await axios({
      url: '/api/city',
      method: 'get',
      params: { pname: res.data.province }
    })
    console.log(cityData);
    // 根据获取的城市数据来遍历生成字符串渲染cs
    const cityStr = cityData.map(item => {
      return ` <option value="${item}">--${item}--</option>`
    }).join('')
    // 修改cs的innerhtml
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
    // 给城市下拉框赋获取data里面对应的城市值
    cs.value = res.data.city
    

    const { list:areaData } = await axios({
      url: '/api/area',
      method: 'get',
      // 这个值是要发起请求时就要带着的
      params: { pname: res.data.province, cname: res.data.city }
    })
    // console.log(data);
    // 遍历获取回来的数据，进行数据处理成字符串，然后渲染as的下拉框
    const areaStr = areaData?.map(item => {
      return ` <option value="${item}">--${item}--</option>`
    }).join('')
    as.innerHTML = `<option value="">--城市--</option>${areaStr}`

    // 给地区下拉框赋上获取data里面对应的地区值
    as.value = res.data.area
    console.log(res);
    // 修改修改modal的modal-title的值
    modalBox.querySelector('.modal-title').innerHTML ='修改学生信息'
    // 给modalBox添加自定义属性学生的id
    modalBox.dataset.id = id
    // console.log(modalBox.dataset.id);
    modal.show()
  }
  if (e.target.classList.contains('bi-trash')) { 
    console.log('我是删除功能');
    // 获取学生的id
    const id = e.target.dataset.id
   try {
    await axios({
      url: '/students/'+id,
      method:'DELETE'
    })
     alert('删除成功')
     getStudentList()
   } catch (error) {
    alert('删除失败')
   }
  }
 })